<template>
  <div>
    <div style="float:left;background-color: #3474ff;width: 100%;height: 180px;">
      <h2 style="color: white;font-size: 18px;margin-top: 50px;">我的预定</h2>
      <!-- 设置 button 为椭圆 -->
      <div  style="width: 90%;margin: auto 30px; margin-top: 30px;height: 40px;background-color: rgb(245, 247, 255, 0.2);border-radius: 40px;">
        <!-- 使用 :class 绑定类名，根据 selectedView 状态添加 selected 类 -->
        <button :class="{ selected: selectedView === 'all' }" style="color: white;width: 22.5%;height: 35px;border-radius: 20px; margin-left:15px;float: left;margin-top: 2px;border: white;background-color: transparent" @click="findAllList">所有</button>
        <button :class="{ selected: selectedView === 'booked' }" style="color: white;width: 22.5%;height: 35px;border-radius: 20px;float: left;margin-top: 2px;border: white;background-color: transparent" @click="findAll">预定中</button>
        <button :class="{ selected: selectedView === 'zhifu' }" style="color: white;width: 22.5%;height: 35px;border-radius: 20px;float: left;margin-top: 2px;border: white;background-color: transparent" @click="zhifu">已支付</button>
        <button :class="{ selected: selectedView === 'history' }" style="color: white;width: 25%;height: 35px;border-radius: 20px;float: left;margin-top: 2px;border: white;background-color: transparent" @click="findOrderHistory">历史记录</button>
      </div>
    </div>




    <div v-for="(item, index) in currentView" :key="index" style="float: left; width: 80%; margin-left: 37px; background: #F9F9FB; margin-top: 20px; border-radius: 10px;" @click="goToDetails(item, userId)">
      <div style="width: 100%; height: 150px;">
        <img :src="item.imageUrl" style="width: 58%; margin-top: 22px; float: left;" />
        <div style="float: left;">
          <p style="margin-left: -15px; margin-top: 25px;">{{ item.carModel }}</p>
          <p style="margin-top: -7px;"><van-icon name="plus" /><span>{{ item.fuelLevel }}% 电量</span></p>
          <p style="margin-top: -1px; margin-left: 8px;"><button style="width: 100px; height: 20px; border-radius: 20px; background-color: #ECF1F9; border: none; color: #3474ff">KM 7673</button></p>
        </div>
      </div>
      <hr style="border-style: dashed; border-width: 2px; background-color: #EFEFEF;" />
      <!-- 新增条件渲染 -->
      <div style="width: 100%; height: 100px;" v-if="item.orderStatus === '已支付'">
        <button style="background-color: rgb(52, 116, 255); width: 120px; height: 50px; float: left; margin-top: 20px; border-radius: 6px; border: red; color: white; margin-left: 30px;">￥{{ item.pricePerHour }}/小时</button>
        <button style="background-color: white; color: rgb(52, 116, 255); border: rgb(52, 116, 250); width: 120px; height: 50px; border-radius: 7px; margin-top: 20px;" @click="orderDetails(item)">订单详情(待归还)</button>
      </div>
      <div style="width: 100%; height: 100px;" v-if="item.orderStatus === '已预定'">
        <button style="background-color: rgb(52, 116, 255); width: 120px; height: 50px; float: left; margin-top: 20px; border-radius: 6px; border: red; color: white; margin-left: 30px;">￥{{ item.pricePerHour }}/小时</button>
        <button style="background-color: white; color: rgb(52, 116, 255); border: rgb(52, 116, 250); width: 120px; height: 50px; border-radius: 7px; margin-top: 20px;" @click="orderDetails(item)">订单详情(待支付)</button>
      </div>
    </div>

    <!--    提示-->
    <van-result v-if="flag"
                type="fail"
                title="暂无数据"
                class="result"
                style="margin-top: 400px; font-size: 20px"
    />
    <van-tabbar v-model="active">
      <van-tabbar-item @click="inage(active)">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active? icon.active : icon.inactive" />
      </van-tabbar-item>
      <van-tabbar-item @click="inage(active)" icon="search">
        <span>附近</span>
        <img slot="icon" slot-scope="props" :src="props.active? icons.active : icons.inactive" />
      </van-tabbar-item>
      <van-tabbar-item @click="inage(active)" icon="gem">
        <span>我的预定</span>
        <img slot="icon" slot-scope="props" :src="props.active? icong.active : icong.inactive" />
      </van-tabbar-item>
      <van-tabbar-item @click="inage(active)" icon="user-o">
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag:false,
      userId: '',
      bentleyCollection: [],
      bentleyBattenCollection: [],
      name: "reserveView",
      active: 0,
      // 新增变量存储当前选择的视图
      selectedView: 'all',
      icon: {
        active: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7GBrICZ8r5GrepghfkYLSQAAAA?rs=1&pid=ImgDetMain',
        inactive: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.7GBrICZ8r5GrepghfkYLSQAAAA?rs=1&pid=ImgDetMain'
      },
      icons: {
        active: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg',
        inactive: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg'
      },
      icong: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
      },
      iconb: {
        active: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg',
        inactive: 'https://pic.nximg.cn/file/20230213/10539202_220809301103_2.jpg'
      },
      currentView: [] // 存储当前要显示的数据集合
    };
  },
  methods: {
    // 查询所有
    findAllList() {
      this.flag = false;
      this.axios.get(`http://localhost:10086/api/user/users/findAllList/${this.userId}`).then(res => {
        this.bentleyCollection = [];
        this.bentleyBattenCollection = [];
        const data = res.data.data
        this.flag = data.length === 0;
        data.forEach(item => {
          if (item.status === '已归还') {
            this.bentleyCollection.push(item);
          } else if (item.status === '已预定') {
            this.bentleyBattenCollection.push(item);
          }
        });

        // 使用 Vue.set 确保响应式更新
        this.$set(this, 'currentView', data);
        // 当点击查询所有时，设置 selectedView 为 all
        this.selectedView = 'all';
      }).catch(error => {
        console.error("查询所有数据失败：", error);
        this.flag = true;
      });
    },
    // 查询历史
    findOrderHistory() {
      this.axios.get(`http://localhost:10086/api/user/users/findAllHistory/${this.userId}`).then(res => {
        const newData = res.data.data;
        this.flag = newData.length === 0;
        // 使用 Vue.set 确保响应式更新
        this.$set(this, 'currentView', newData);
        // 当点击查询历史时，设置 selectedView 为 history
        this.selectedView = 'history';
      }).catch(error => {
        console.error("查询历史数据失败：", error);
      });
    },
    // 查询预定中
    findAll() {
      this.flag = false;
      this.axios.get(`http://localhost:10086/api/user/users/findAllBooked/${this.userId}`).then(res => {
        const newData = res.data.data;
        console.log(newData)
        if (newData === null) {
          this.flag = true;
        }
        // 使用 Vue.set 确保响应式更新
        this.$set(this, 'currentView', newData);
        // 当点击查询预定中时，设置 selectedView 为 booked
        this.selectedView = 'booked';
      }).catch(error => {
        console.error("查询预定中数据失败：", error);
      });
    },
    // 查询已支付
    zhifu() {
      this.flag = false;
      this.axios.get(`http://localhost:10086/api/user/users/findAllzhifu/${this.userId}`).then(res => {
        const newData = res.data.data;
        console.log(newData)
        if (newData === null) {
          this.flag = true;
        }
        // 使用 Vue.set 确保响应式更新
        this.$set(this, 'currentView', newData);
        // 当点击查询预定中时，设置 selectedView 为 booked
        this.selectedView = 'zhifu';
      }).catch(error => {
        console.error("查询预定中数据失败：", error);
      });
    },
    inage(active) {
      switch (active) {
        case 0:
          this.$router.push({name: 'index'});
          break;
        case 1:
          this.$router.push({name: 'rearby'});
          break;
        case 3:
          this.$router.push({name: 'my'});
          break;
        default:
          break;
      }
    },
    // 修改 orderDetails 方法，传入汽车 id
    orderDetails(item) {
      console.log("carid"+item.carId)
      localStorage.setItem("cars", JSON.stringify(item))
      this.$router.push({name: 'orderDetails', params: {carId: item.carId}});
    },
    // 新增方法：点击盒子跳转到 details 页面并携带用户 id 和车辆 id
    goToDetails(item, userId) {
      // this.$router.push({name: 'details', params: {carId: item.carId}});
      localStorage.setItem("cars", JSON.stringify(item))
      this.$router.push({path:'/details', query: { car : item }})
    }
  },
  created() {
    const user = JSON.parse(localStorage.getItem("currentUser"))
    if (user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }

      this.userId = user.userId;
      this.findAllList();

  }
};
</script>

<style scoped>
button:focus {
  background: white !important;
  color: #3474ff !important;
}

/* 新增 selected 类的样式，可自定义 */
button.selected {
  background: white !important;
  color: #3474ff !important;
}
</style>